<template>
	<view>
		<view class="content_wrap" style="margin-top: 20upx;">
			<view class="content row">
				<span>卡类型</span>
				<span class="flex_one"></span>
				<span style="margin-right: 20upx;">{{bankName}}</span>
				<span>储蓄卡</span>
			</view>
		</view>
		
		<view class="content_wrap" style="margin-top: 20upx;">
			<view class="content row">
				<span>手机号</span>
				<!-- <span class="flex_one"></span> -->
				<input type="number" maxLenght="11" placeholder="请输入银行预留手机号" v-model="phone"  />
			</view>
		</view>
		
		<view class="bottom_btn row_center" @click="preadd">
			<span class="flex_one" :class="{'active': (phone.length == 11)}">下一步</span>
		</view>
		
	</view>
</template>

<script>
	import { BASE_URL,preadd } from '@/utils/api'
	
	export default {
		data() {
			return {
				phone: '',
				bankName: '',
				tixian: 0
			}
		},
		methods: {
			async preadd(){
				if(!this.phone || (this.phone.length != 11)){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入正确的手机号'
					});
					return;
				};
				let params = {
					userPhone: this.phone
				};
				let res = await preadd(params);
				if(res.code == 1){
					this.goToVerify();
				}
			},
			goToVerify(){
				uni.navigateTo({
					url:'../add_bank_code/add_bank_code?phone='+this.phone+"&tixian"+this.tixian
				})
			}
		},
		onLoad(opt) {
			this.bankName = uni.getStorageSync("bankName");
			this.tixian = opt.tixian;
		}
	}
</script>

<style>
	page{background: #F1F1F1;}
.content_wrap{padding-left: 27upx; background: #FFFFFF; color: #333333; font-size: 32upx;}
.content_wrap .content{height: 100upx;  padding-right: 30upx;}
.content_wrap .content image{height: 20upx; width: 15upx; margin-right: 5upx;}
.content_wrap .content input{text-align: right;}

.bottom_btn{padding: 0upx 30upx; margin-top: 60upx;}
.bottom_btn span{background: #CCCCCC; color: #FFFFFF; font-size: 32upx; height: 94upx; line-height: 94upx; text-align: center;
	font-weight: bold;border-radius: 12upx;}
.active{background: #FFCA0A!important; color: #333333!important;}

input{flex: 1;}
	
</style>
